<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框隐藏</title>
    <style>
        /* .search-box{
            background-color: aqua;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .search{
            width: 50px;
            height: 50px;
            background-color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .search.active{
            width: 200px;
            height: 50px;
            background-color: #FFF;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            transition: all 0.4s ease;
        }
        .search img{
            width: 30px;
            height: 30px;
        } */
        * {
                box-sizing: border-box;
                }

                body {
                    background-image: linear-gradient(90deg, #7d5fff, #7158e2);
                    font-family: 'Roboto', sans-serif;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100vh;
                    overflow: hidden;
                    margin: 0;
                }

                .search {
                    position: relative;
                    height: 50px;
                }

                .search .input {
                    background-color: #fff;
                    border: 0;
                    font-size: 18px;
                    padding: 15px;
                    height: 50px;
                    width: 50px;
                    transition: width 0.3s ease;
                }

                .btn {
                    background-color: #fff;
                    border: 0;
                    cursor: pointer;
                    font-size: 24px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 50px;
                    width: 50px;
                    transition: transform 0.3s ease;
                }

                .btn:focus,.input:focus {
                    outline: none;
                }

                .search.active .input {
                     width: 200px;
                }

                .search.active .btn {
                    transform: translateX(198px);
                }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" class="input" placeholder="Search...">
        <button class="btn">
          <i class="fas fa-search"></i>
        </button>
      </div>
    <!-- <div class="search-box">
        <div class="search" id="search">
            <img src="search.png" alt="" srcset="">
        </div>
    </div>
    <script>
        const search = document.getElementById('search');
        search.addEventListener('click',()=>{
            search.classList.add('active')
        }) -->
   <script>
        const search = document.querySelector('.search')
        const btn = document.querySelector('.btn')
        const input = document.querySelector('.input')

        btn.addEventListener('click', () => {
        //   toggle方法：如果存在就删除，不存在就添加
            search.classList.toggle('active')
            input.focus()  
            
        }) 
    </script>
</body>
</html>